<template>
  <div id='container' class="cls-container">
    <div class="cls-content">
      <div class="cls-content-sm panel">
        <div class="panel-body">
          <div class="mar-ver pad-btm">
            <div style="margin-top:135px"><img v-bind:src="logo" /></div>
            <!-- <i class='saas-icon-antiy' style="font-size:65px;color:#455b6b"/> -->
            <h3 style="color:#455b6b;font-size:18px">{{title}}</h3>
          </div>
          <form v-on:submit.prevent="submit">
            <div class="form-group ">
              <div class="input-group">
                <div class="input-group-addon" style="border:none;border-top-left-radius: 20px;border-bottom-left-radius: 20px;">
                  <div style="padding-right:10px;border-right:1px solid #dfe7ef;"><img v-bind:src="peoPng" /></div>
                </div>
                <input style="border-top-right-radius: 20px;border-bottom-right-radius: 20px;" type="text" class="form-control" placeholder="账号" v-model="username" @input="changeValue('username',$event.target.value)">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon" style="border:none;border-top-left-radius: 20px;border-bottom-left-radius: 20px;">
                  <div style="padding-right:10px;border-right:1px solid #dfe7ef"><img v-bind:src="passPng" /></div>
                </span>
                <input  style="border-top-right-radius: 20px;border-bottom-right-radius: 20px;" type="password" class="form-control" placeholder="密码" @input="changeValue('password',$event.target.value)" v-model="password">
              </div>
            </div>
            <div class="form-group " style="margin-bottom:21px">
              <div class="input-group">
                <span class="input-group-addon" style="border:none;border-top-left-radius: 20px;border-bottom-left-radius: 20px;">
                  <div style="padding-right:10px;border-right:1px solid #dfe7ef"><img v-bind:src="wordPng" /></div>
                </span>
                <!-- <input  type="text" class="form-control" placeholder="验证码" id="va" @input="changeValue('validcodeInput',$event.target.value)" v-model="validcodeInput"> -->
                <input  type="text" style="width: 70%;float: left;" class="form-control" placeholder="验证码" @input="changeValue('validcodeInput',$event.target.value)" v-model="validcodeInput">
                <img  style="border-top-right-radius: 20px;border-bottom-right-radius: 20px;" v-bind:src="validcode.image" id="vaImg" v-on:click="getValidcode" />
              </div>
              <div class="clearFloat"></div>
            </div>
            <div>
              <button class="btn btn-primary btn-lg btn-block" style="border-radius:20px" type="submit" id="loginButton">登 录</button>
            </div>
          </form>
        </div>
      </div>
    </div>



    <div style="height:32px;background:#f1f4f7;position: absolute;bottom:0;width: 100%;text-align: center;border-top:1px solid #d3dce8">
      <span style="display: block;font-size:12px;color:#5c6781;line-height:32px">© 2017 Antiy Labs</span>
    </div>
  </div>
</template>
<script>
import { compileStr } from '../../utils/encryption.js'
import src from '../../images/login/logo.png'
import peoPng from '../../images/login/01.png'
import passPng from '../../images/login/02.png'
import wordPng from '../../images/login/03.png'
import logo from '../../images/login/logo1.png'
import config from '../../config.js'
export default {
  data () {
    return {
      src: src, // logo图片
      peoPng: peoPng, // 用户名图片
      passPng: passPng, // 密码图片
      wordPng: wordPng, // 验证码图片
      title: config.title,
      logo: logo
    }
  },
  created () {
    this.getValidcode()
  },
  beforeUpdate () {
    this.$nextTick(
      function () {
        this.autolog = this.$route.query.id
        if (this.autolog === 'autoTestingV1') {
          this.$store.commit('system/validationFilling', this.validcode.value)
        }
      })
  },
  computed: {
    username: {
      get () {
        return this.$store.state.system.login.username
      },
      set (value) {
        this.$store.commit('system/settersLogin', {
          'key': 'username',
          'value': value
        })
      }
    },
    password: {
      get () {
        return this.$store.state.system.login.password
      },
      set (value) {
        this.$store.commit('system/settersLogin', {
          'key': 'password',
          'value': value
        })
      }
    },
    validcodeInput: {
      get () {
        return this.$store.state.system.login.validcodeInput
      },
      set (value) {
        this.$store.commit('system/settersLogin', {
          'key': 'validcodeInput',
          'value': value
        })
      }
    },
    validcode: {
      get () {
        return this.$store.state.system.login.validcode
      },
      set (value) {
        this.$store.commit('system/settersLogin', {
          'key': 'validcode',
          'value': value
        })
      }

    }
  },
  methods: {
    getValidcode () {
      // 更换验证码
      this.$store.dispatch('system/validcode')
    },
    submit () {
      // 登录
      let data = {
        username: compileStr(this.username),
        password: compileStr(this.password),
        validcode: compileStr(this.validcodeInput)
      }
      this.$store.dispatch('system/login', data)
    },
    changeValue (key, value) {
      // 获取用户名、密码、验证码
      if (key === 'validcodeInput') {
        this.validcodeTest = true
      }
      let data = {
        key: key,
        value: value
      }
      this.$store.commit('system/settersLogin', data)
    }
  },
  watch: {
    '$route' () {
      this.autolog = this.$route.query.id
      if (this.autolog === 'autoTestingV1') {
        this.$store.commit('system/validationFilling', this.validcode.value)
      }
    }
  }
}
</script>
<style>
#container{
 	background-color: #e5eaf1;	
}
#va {
  width: 70%;
  float: left;
}
.cls-content .form-group {
  margin-bottom: 12px;
}
.input-group input {
  border: none;
  
}
#loginButton {
  padding: 8px 16px;
  background-color: #4990ff;
  border-color: #4990ff;
  font-size: 15px;
  font-weight: 100;
}
#loginButton:hover {
  padding: 8px 16px;
  background-color: #3761f4;
  border-color: #3761f4;
  font-size: 15px;
  font-weight: 100;
}
.input-group input:focus {
  border: none;
  
}
.input-group-addon {
  min-width: 36px;
  padding: 6px 0px 6px 10px;
}
#vaImg {
  width: 30%;
  height: 39px;
  float: left;
}
.clearFloat {
  clear: both;
}
.pad-btm {
  padding-bottom: 37px;
}
.showTips {
  text-align: left !important;
}
.showError {
  display: none;
}
.cls-container {
  background-color:#f8f8f8;
  /* background-image: url('../../images/login/bg.jpg'); */
  /* background-size: 100% 100%; */
  position: relative;
}
.cls-content {
  padding-top: 80px;
  /* background: #ecf0f5;
  padding-bottom: 345px */
}
.mar-ver {
  margin-top: 95px;
  margin-bottom: 15px;
}
.mar-ver h3 {
  font-size: 20px;
  color: #ebebeb;
  font-weight: 100;
  font-family: 'Microsoft YaHei';
  margin-top: 30px;
}
.cls-content .cls-content-sm {
  width: 390px;
}
.form-control {
  height: 39px;
}
.input-group-addon {
  background-color: #fff;
}
</style>